<template>
	<view class="brandaLLBox">
		<view class="width-90"><u-search placeholder="输入银行名称查询" v-model="search" @clear="searchBank" @search="searchBank" :show-action="false"></u-search></view>
		<scroll-view scroll-y :scroll-into-view="pptoView" scroll-with-animation show-scrollbar class="content-list">
			<!-- 全部品牌项 -->
			<!-- 品牌详细列表 -->
			<view class="">
				<view v-for="(item, index) in indexList" :id="item.firstLetter" :key="item.firstLetter">
					<!-- {{ item.firstLetter }} -->
					<view class="b-list">
						<view class="list-cell" v-for="(item1, index1) in item.list" :key="index1">
							<view class="brandcss" @tap="getBrand(item1)">{{ item1.parentBankName }}</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 字母索引 -->
		<view class="floor flex flex-dir-c flex-jc-sb">
			<view v-for="(item, index) in codeList" :data-id="item" :key="index" @click="bindToView" class="floor-item">{{ item }}</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			indexList: [],
			brandTotal: '',
			pptoView: 'A',
			xuanzebrand: '',
			codeList: [],
			search: '',
			height: 100
		};
	},
	filters: {
		// 过滤将letter的值Aa ，转为# 进行显示
		letter(str) {
			return str === 'A' ? '#' : str;
		}
	},
	created() {
		this.GetParentBankNameList();
	},
	methods: {
		// 品牌字母索引到对应内容
		bindToView(event) {
			console.log(event);
			var id = event.currentTarget.dataset.id;
			this.pptoView = id;
		},
		// 获取品牌
		getBrand(val) {
			let id = val;
			uni.$emit('bank',id.parentBankName)
       uni.navigateBack(-1)
			// uni.redirectTo({
			// 	url:'/pages_common/pages_me/assets/addAccount/addAccount?bank='+id.parentBankName
			// })
			// console.log(id);
		},
		// 封装下拉筛选关闭方法
		downClose() {
			this.$refs.uDropdown.close();
			this.downStatus = false; // 打开下拉菜单
		},
		searchBank() {
			this.GetParentBankNameList()
		},
		GetParentBankNameList() {
			// try{
			let data = {
				searchContent: this.search
			};
			// const res=
			this.$api.bindbank.GetParentBankNameList(data).then(res => {
				this.codeList = res.data.firstLetterList.map(it => {
					return it.firstLetter;
				});
				this.indexList = res.data.parentBankNameList;
			});
		}
	},
	beforeDestroy() {
		uni.$off('bank')
	}
};
</script>

<style lang="scss">
.list-cell {
	display: flex;
	box-sizing: border-box;
	width: 100%;
	padding: 10px 24rpx;
	overflow: hidden;
	color: #323233;
	font-size: 14px;
	line-height: 24px;
	background-color: #fff;
}
.anchor-text {
	color: red;
}

// 品牌列表样式
.b-list {
	padding: 0rpx 20rpx;
	background: rgba(255, 255, 255, 1);
	border-radius: 10rpx;

	.list-cell {
		box-sizing: border-box;
		width: 100%;
		padding: 10rpx 0px 0px 0px;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
		border-bottom: 1px solid #eeeeee;
	}

	.brandcss {
		height: 80rpx;
		line-height: 80rpx;
		display: flex;
		flex-direction: row;
	}
}

.brandcss {
	display: flex;
	flex-direction: row;

	&.title-box {
		padding: 0rpx 40rpx 20rpx 0;
		margin: 0 30rpx;
		border-bottom: 2rpx solid #eee;
	}
}

.allbran {
	font-size: 34rpx;
	color: #333333;
}

.brandaLLBox {
	width: 100%;
	height: 100%;
	padding: 0 22rpx;
	margin-top: 10rpx;
	overflow: hidden;
	background-color: #fff;
	.width-90 {
		width: 94%;
		margin: 10rpx auto;
	}
	.content-list {
		width: 100%;
		height: 100%;
	}
	// height: 100vh;
	position: relative !important;
	// 字母索引
	.floor {
		position: fixed !important;
		top: 180rpx !important;
		right: 2rpx !important;
		width: 44rpx !important;
		height: calc(100vh - 600rpx) !important;
		text-align: center;
		font-size: 20rpx;
		font-weight: bold;
		color: #999 !important;
	}
}
</style>
